<template>
  <div class="home">
    <!-- 头部搜索 -->
    <van-search v-model="value" placeholder="积云商城" left-icon="search" />
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
    <!-- 主体内容 -->
    <div class="cen">
      <van-icon name="passed" color="red" />
      自营品牌
      <van-icon name="passed" color="red" />
      无忧退货
      <van-icon name="passed" color="red" />
      48小时快速退货
    </div>
    <!-- 宫格 -->
    <van-grid :column-num="2">
      <van-grid-item
        v-for="value in 6"
        :key="value"
        icon="photo-o"
        text="文字"
      />
    </van-grid>
    
  </div>
</template>

<script>
// import Vue from 'vue'
// import axios from 'axios'
// Vue.use(axios)
export default {
  name: "Home",
  data() {
    return {
      value: "",
      list:[]
    };
  },
  mounted(){
    // axios({
    //   url:'http://api.com/index',
    //   method:'get'
    // }).then(res => {
    //   console.log(res.data);
    //   this.list = res.data
    // }).catch(error => {
    //   alert(error)
    // })
  }
  
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  .van-search {
    height: 50px;
    padding: 0;
    .van-field__body {
      height: 50px;
      color: #000;
      text-align: center;
      font-size: 50px;
    }
  }

  .my-swipe .van-swipe-item {
    height: 200px;
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  .cen {
    width: 100%;
    height: 40px;
    text-align: center;
  }
}
</style>
